<template>
  <Modal
    v-model="visible"
    @on-ok="ok"
    @on-cancel="cancel"
    @on-visible-change="visibleChange"
    okText="确定"
    cancelText="清空"
    width="1240"
  >
    <div style="padding:20px 0 0;">
      <Tabs v-model="tabVal" type="card">
        <TabPane name="0" label="创建控糖计划"></TabPane>
        <!-- <TabPane name="1" label="方案预览"></TabPane> -->
      </Tabs>
    </div>
    <div class="main">
      <div style="display:flex" v-if="tabVal==0">
        <div class="addPlanArea">
          <div class="formBox">
            <Form :model="activityForm" label-position="left" :label-width="72">
              <FormItem class="formItem" label="方案名称：">
                <Input class="formInput" v-model="activityForm.name" placeholder="输入方案名称" />
                <div class="choosePlan">选择方案模板</div>
              </FormItem>
              <FormItem class="formItem" label="开始日期：">
                <DatePicker
                  class="formInput"
                  v-model="activityForm.date"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择开始日期"
                  @on-change="getWeeklist"
                ></DatePicker>
              </FormItem>
              <FormItem class="formItem" label="执行天数：">
                <Select class="formInput" v-model="activityForm.time" @on-change="getWeeklist" placeholder="选择执行天数">
                  <Option v-for="item in [3,7]" :value="item" :key="item">{{ item }}天</Option>
                </Select>
              </FormItem>
              <FormItem class="formItem" label="负 责 人 ：">
                <div class="workerList">
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                </div>
              </FormItem>
              <FormItem class="formItem" label="参与人员：">
                <div class="workerList">
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                  <div class="workerItem">
                    <img
                      src
                      onerror="this.src='https://webimg.ziroom.com/1c853bc6-21fc-4e32-8a6f-18ec2c6fef32.png'"
                    />
                    <p class="name">张一元</p>
                  </div>
                </div>
              </FormItem>
            </Form>
          </div>
        </div>
        <div class="line"></div>
        <div class="addArea">
          <div class="dateList">
            <div
              class="dateItem"
              :class="[item.dateComplate==activeDate?'active':'']"
              v-for="(item,index) in weekList"
              :key="index"
              @click="changeDate(index)"
            >
              <div class="date">{{item.date}}</div>
              <div class="week">{{item.week}}</div>
            </div>
          </div>

          <div class="energyList">
            <div class="total">
              <span class="bold">碳水总量：</span>
              <span class="light">{{lifeRecord.carbohydrate||'--'}}</span>
              <span class="grey">千卡</span>
            </div>
            <div class="total">
              <span class="bold">胰岛素总计量：</span>
              <span class="light">{{lifeRecord.insulin||'--'}}</span>
              <span class="grey">U</span>
            </div>
            <div class="total">
              <span class="bold">用药总计量：</span>
              <span class="light">{{lifeRecord.medicine||'--'}}</span>
              <span class="grey">次</span>
            </div>
          </div>

          <div class="btnList">
            <div class="item" @click="showModel(1)">
              <img src="../../assets/icons/u.png" alt />
              <span>+ 饮食</span>
            </div>
            <div class="item" @click="showModel(2)">
              <img src="../../assets/icons/ci.png" alt />
              <span>+ 用药</span>
            </div>
            <div class="item" @click="showModel(3)">
              <img src="../../assets/icons/ku.png" alt />
              <span>+ 胰岛素</span>
            </div>
            <div class="item" @click="showModel(4)">
              <img src="../../assets/icons/kal.png" alt />
              <span>+ 运动</span>
            </div>
          </div>
          <div v-if="lifeRecord.plan&&lifeRecord.plan.length">
            <mealsPlan v-for="(item,index) in lifeRecord.plan" :plan="item" :key="index" @edit="planEdit" @del="getLifeRecord"/>
          </div>
          <div class="empty" v-else>
            <img src="../../assets/images/empty.png" alt="">
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <div class="previewArea" v-if="tabVal==1">
        <div class="header">
          <div class="title">方案预览</div>
          <div class="dots">
            <div class="item">
              <p class="dot" style="background: #242424;"></p>食物
            </div>
            <div class="item">
              <p class="dot" style="background: #16CCA6;"></p>药物
            </div>
            <div class="item">
              <p class="dot" style="background: #32C5FF;"></p>运动
            </div>
          </div>
        </div>
        <div class="tableBox">
          <div class="theader">
            <div style="width:60px"></div>
            <div class="cols">
              <div class="col">早餐</div>
              <div class="col">午餐</div>
              <div class="col">晚餐</div>
              <div class="col">加餐</div>
            </div>
          </div>
          <div class="tbody">
            <div class="row" v-for="i in 7" :key="i">
              <div class="date">
                23
                <p>星期一</p>
              </div>
              <div class="rowItem" v-for="i in 4" :key="i">
                <p :class="[]" v-for="i in 4" :key="i">米饭 300g</p>
                <p class="green">米饭 300g</p>
                <p class="blue">米饭 300g</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <addModel @cancel="addModelClose" @ok="addModelOk" :date="activeDate" :show="addModelShow" :addModelData="addModelData" />
    </div>
  </Modal>
</template>
<script>
import mealsPlan from "./components/mealsPlan";
import addModel from "./components/addModel";
import { getLifeRecord } from "@/api/addPlan"
export default {
  name: "addActivityModel",
  components: { mealsPlan, addModel },
  props: {
    activityData: { type: Object },
    show: Boolean,
    title: String
  },
  data() {
    return {
      visible: this.show,
      tabVal: "0",
      activityForm: {
        name: "",
        date: new Date(),
        time: 7
      },
      weekList:[],
      activeDate:'',
      lifeRecord:{},
      addModelShow: false,
      addModelData: {
        //1饮食 2用药 3胰岛素 4运动
        kind: "",
        title: ""
      }
    };
  },
  watch: {
    show(newv, oldv) {
      this.visible = newv;
      this.getWeeklist();
      this.getLifeRecord();
    }
  },
  mounted() {},
  methods: {
    ok() {
      this.visible = false;
      this.$emit("showModel", this.visible);
    },
    cancel() {
      this.visible = false;
      this.$emit("showModel", this.visible);
    },
    visibleChange() {
      this.$emit("showModel", this.visible);
    },
    getLifeRecord(){
      getLifeRecord({
        date:this.activeDate,
        uid:this.$route.query.user_id
      }).then(res=>{
        if(res.code == 100000){
          this.lifeRecord = res.data;
        }
      })
    },
    addModelClose(visible) {
      this.addModelShow = visible;
    },
    addModelOk(visible) {
      this.addModelShow = visible;
      this.getLifeRecord();
    },
    showModel(kind) {
      this.addModelShow = true;
      let str = kind>1?kind>3?'运动':kind>2?'胰岛素':'用药':'饮食';
      this.addModelData = {
        kind,
        title: "添加"+str
      };
    },
    getWeeklist() {
      this.weekList = []
      //获取系统当前时间
      let now = this.activityForm.date?new Date(this.activityForm.date):new Date();
      let nowTime = now.getTime();
      let oneDayTime = 24 * 60 * 60 * 1000;
      for (var i = 0; i < this.activityForm.time; i++) {
        //显示周一
        let ShowTime = nowTime + i * oneDayTime;
        //初始化日期时间
        let myDate = new Date(ShowTime);
        let year = myDate.getFullYear();
        let month = myDate.getMonth() + 1;
        let date = myDate.getDate()<10?'0'+myDate.getDate():myDate.getDate();
        let week = "星期" + "日一二三四五六".charAt(myDate.getDay());
        this.weekList.push({
          date,
          dateComplate:`${year}-${month}-${date}`,
          week
        })
      }
      this.activeDate = this.weekList[0].dateComplate
    },
    changeDate(index){
      this.activeDate = this.weekList[index].dateComplate;
      this.getLifeRecord();
    },
    planEdit(plan){
      let kind = plan.kind>2?4:plan.kind>1?plan.type>1?3:2:1;
      let str = kind>1?kind>3?'运动':kind>2?'胰岛素':'用药':'饮食';
      this.addModelData = {
        kind,
        title: "添加"+str,
        plan
      };
      this.addModelShow = true;
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  box-sizing: border-box;
  width: 100%;
  height: 60vh;
  overflow-y: scroll;
  display: flex;
  justify-content: space-between;
  .line {
    width: 1px;
    height: 100%;
    background: #f4f4f4;
  }
  .addPlanArea {
    width: 468px;
    flex-shrink: 0;
    padding: 10px 40px 20px;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
    .formItem {
      margin-bottom: 20px;
      .choosePlan {
        width: 98px;
        height: 32px;
        background: #f0f2f5;
        border-radius: 3px;
        border: 1px solid #d7dbe0;
        border-radius: 3px;
        font-size: 12px;
        color: #242424;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        margin-left: 12px;
      }
      .formInput {
        width: 188px;
      }
    }
    .workerList {
      display: flex;
    }
    .workerItem {
      justify-content: center;
      align-items: flex-start;
      display: flex;
      width: 35px;
      flex-wrap: wrap;
      margin-right: 23px;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #fefefe;
        flex-shrink: 0;
      }
      .name {
        height: 18px;
        font-size: 12px;
        color: #9f9f9f;
        line-height: 18px;
        white-space: nowrap;
      }
    }
    .workerItem:last-child {
      margin-right: 0;
    }
  }
  .addArea {
    width: 684px;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 40px 20px 20px;
    .dateList {
      transition: all 0.3s;
      padding: 12px 0 18px;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      overflow-x: scroll;
      .dateItem {
        cursor: pointer;
        width: 64px;
        height: 64px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #cecece;
        margin-right: 12px;
        position: relative;
        .date {
          font-size: 12px;
          color: #aaaaaa;
          position: absolute;
          left: 15px;
          top: 10px;
        }
        .week {
          text-align: center;
          margin-top: 36px;
          font-size: 13px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #242424;
        }
      }
      .dateItem.active {
        background: #13be9b;
        border: 0 none;
        .date {
          color: #fff;
        }
        .week {
          color: #fff;
        }
      }
      .dateItem.active::after {
        display: block;
        content: "";
        border-width: 8px 8px 8px 8px;
        border-style: solid;
        border-color: #13be9b transparent transparent transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
      }
      .dateItem:last-child {
        margin-right: 0;
      }
    }
    .energyList {
      height: 54px;
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding:0 11px;
      .total {
        display: flex;
        align-items: center;
      }
      .bold {
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #242424;
      }
      .light {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #13be9b;
        margin-right: 4px;
        margin-top: -4px;
      }
      .count {
        font-size: 14px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #0d0e10;
      }
      .grey {
        font-size: 12px;
        color: #9f9f9f;
      }
      .icon {
        width: 15px;
        height: auto;
        margin: 0 5px;
      }
    }
    .btnList {
      display: flex;
      margin: 16px 0;
      justify-content: space-between;
      .item {
        cursor: pointer;
        width: 120px;
        height: 32px;
        border-radius: 20px;
        border: 1px solid #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #242424;
        img {
          width: 18px;
          height: 18px;
        }
      }
    }
    .empty{
      margin-top: 120px;
      text-align: center;
      img{
        width: 90px;
      }
      p{
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #B8B8B8;
      }
    }
  }

  .previewArea {
    width: 635px;
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 40px 20px 20px;
    .header {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #242424;
      font-size: 12px;
      .dots {
        display: flex;
        align-items: center;
        .item {
          display: flex;
          align-items: center;
          margin-right: 27px;
          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 8px;
          }
        }
        .item:last-child {
          margin-right: 0;
        }
      }
    }
    .tableBox {
      .theader {
        display: flex;
        align-items: center;
        height: 32px;
        background: #efefef;
        .cols {
          width: 575px;
          display: flex;
          justify-content: space-around;
          font-size: 12px;
          font-family: PingFang-SC-Heavy, PingFang-SC;
          font-weight: 800;
          color: #242424;
        }
      }
      .tbody {
        .row {
          display: table;
          background: #fbfbfb;
          margin-bottom: 4px;
          .date {
            display: table-cell;
            width: 60px;
            box-sizing: border-box;
            padding: 10px 0 0 14px;
            color: #aaaaaa;
            .blod {
              font-size: 13px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #242424;
              margin-top: 4px;
            }
          }
          .rowItem {
            display: table-cell;
            width: 128px;
            border-left: 1px solid #fff;
            padding: 5px 0 0 14px;
            p {
              color: #242424;
              line-height: 18px;
            }
            .green {
              color: #16cca6;
            }
            .blue {
              color: #32c5ff;
            }
          }
        }
        .row:nth-child(even) {
          background: rgba(19, 190, 155, 0.04);
        }
      }
    }
  }
}
</style>
<style lang="less">
.ivu-form .ivu-form-item-label {
  padding: 10px 0;
}
</style>
